<template>
  <div v-if="is_permission">
    <el-tabs class="w-full" v-model="activeName">
      <el-tab-pane label="产品分类" name="1">
        <productCategory
          v-if="activeName == 1"
          :type="props.type"
          @node-click="handleNodeClick($event, '1')"
        ></productCategory>
      </el-tab-pane>
      <el-tab-pane label="组织分类" name="2">
        <departmentCategory
          v-if="activeName == 2"
          :type="props.type"
          @node-click="handleNodeClick($event, '2')"
        ></departmentCategory>
      </el-tab-pane>
    </el-tabs>
  </div>
  <template v-else>
    <productCategory
      :type="props.type"
      @node-click="handleNodeClick($event, '1')"
    ></productCategory>
  </template>
</template>
<script setup name="SelectCategoryTree">
import productCategory from "./productCategory.vue";
import departmentCategory from "./departmentCategory.vue";

const props = defineProps({
  placeholder: {
    type: String,
    default: "请选择",
  },
  defaultProps: {
    type: Object,
    default: {
      label: "name",
      children: "son",
    },
  },
  type: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["node-click"]);
const activeName = ref("1");

const is_permission = computed(() => {
  return (window.BTN_AUTH || []).includes(
    "/goods/task/product/organization-classification"
  );
});

const handleNodeClick = (data, type) => {
  emit("node-click", data, type);
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
  margin-bottom: 0;
}
</style>
